﻿@{
    ViewBag.Title = "角色管理";
}
<div id="vue" v-cloak>
    <form class="layui-form layui-form-pane">
        <div class="layui-inline">
            <label class="layui-form-label">角色名:</label>
            <div class="layui-input-inline" style="width: 250px;">
                <input type="text" placeholder="请输入角色名" autocomplete="off" class="layui-input" v-model="pagination.Filter.RoleName">
            </div>
        </div>
        <button type="button" class="layui-btn layui-btn-normal" v-on:click="find">查询</button>
        <button type="button" v-on:click="addRole" data-method="notice" class="layui-btn">添加角色</button>
    </form>
    <div>
        <table class="layui-table">
            <colgroup>
                <col width="100" />
            </colgroup>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>角色名</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="role in pagination.Datas">
                    <td>{{role.Id}} </td>
                    <td>{{role.Name}} </td>
                    <td style="text-align:center;">
                        <a href="javascript:void(0)" v-bind:title="'编辑'+role.Name+'权限'" v-on:click="showRole(role)">
                            <i class="layui-icon">&#xe642;</i>
                        </a>
                        <a href="javascript:void(0)" title="编辑权限" v-on:click="showPermissionPanel(role)">
                            <i class="layui-icon">&#xe621;</i>
                        </a>
                        <a href="javascript:void(0)" v-bind:title="'删除'+role.Name+'角色'" v-on:click="remove(role)">
                            <i class="layui-icon">&#xe640;</i>
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

@section scripts{
    <div id="roleInfo" style="display:none">
        <form class="layui-form layui-form-pane" style="margin:20px;">
            <div class="layui-inline">
                <label class="layui-form-label">角色名</label>
                <div class="layui-input-inline">
                    <input v-model="currentRole.Name" type="text" autocomplete="off" placeholder="请输入角色名称" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button type="button" v-on:click="save" class="layui-btn layui-btn-normal">保存</button>
            </div>
            <div class="layui-inline">
                <button type="button" v-on:click="close" class="layui-btn layui-btn-danger">关闭</button>
            </div>
        </form>
    </div>

    <div id="permissionList" style="display:none;">
        <div style="margin:20px;">
            <form class="layui-form layui-form-pane">
                <div class="layui-inline">
                    <label class="layui-form-label">权限名称</label>
                    <div class="layui-input-inline">
                        <input type="text" v-model="filter.ActionPermissionName" class="layui-input">
                    </div>
                </div>
                <button type="button" class="layui-btn layui-btn-normal" v-on:click="query">查询</button>
            </form>
            <div style="margin:20px 0">
                <dl v-for="group in permissionGroups" style="padding:3px 0">
                    <dt>{{group.GroupName}}</dt>
                    <dd v-for="permission in group.Permissions" style="padding:5px 10px">
                        <label>
                            <input type="checkbox" v-model="permission.IsInPermission" />  {{permission.ActionPermissionName}}
                        </label>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
}

